import React, { Component } from 'react'
import axios from 'axios'
import PubSub from 'pubsub-js'

export default class Main extends Component {

  state = {
    firstView: true,  // 是否显示第一页面
    loading: false, // 是否正在请求中
    errMsg: '', // 请求错误提示
    users: [], // 搜索到的用户列表
  }

  // 初始化执行一次
  componentDidMount () {
    // 订阅一个搜索的消息
    PubSub.subscribe('search', async (msgName, searchName) => { // 一定要用箭头函数
      // 更新为请求中的状态
      this.setState({
        firstView: false,
        loading: true
      })

      try {
        // 发 ajax请求
        const response = await axios.get('https://api.github.com/search/users', {
          params: {
            q: searchName
          }
        })
        // 成功, 更新为成功的状态
        // [{name, avatar_url, url}]
        // [{login, avatar_url, html_url}]
        const users = response.data.items.map(item => ({
          name: item.login,
          avatar_url: item.avatar_url,
          url: item.html_url
        }))

        this.setState({
          loading: false,
          users
        })
      } catch (error) {  // 失败, 更新为失败的状态
        this.setState({
          loading: false,
          errMsg: error.message || '未知错误'
        })
      }
    })
  }

  // 组件将要卸载
  componentWillUnmount () {
    // 取消订阅
    PubSub.unsubscribe('search')
  }

  // state或props变化了
  /* async componentDidUpdate (prevProps) {
    // 判断是searchName属性变化
    if (this.props.searchName !== prevProps.searchName) {

    }
  } */

  render() {

    const {firstView, loading, errMsg, users} = this.state

    // 进行条件渲染
    /* 
    输入关键字搜索
    加载中...
    请求错误的信息
    用户列表
    */
    if (firstView) {
      return <h3>输入关键字搜索: {this.props.searchName}</h3>
    } else if (loading) {
      return <h3>加载中...</h3>
    } else if (errMsg) {
      return <h3>{errMsg}</h3>
    }

    // [{name, avatar_url, url}]

    return (
      <div className="row">
        {
          users.map(user => <div className="card" key={user.name}>
            <a href={user.url} target="_blank">
              <img src={user.avatar_url} style={{width: 100}}/>
            </a>
            <p className="card-text">{user.name}</p>
          </div>)
        }
      </div>
    )
  }
}
